<template>
<div class="wrapper">
	<swiper class="swiper" :options="swiperOption">
	  <swiper-slide v-for="item of imgList" :key="item.id">
		<img class="swiper-img" :src="item.imgUrl">
	  </swiper-slide>
	</swiper>
	<div class="swiper-pagination"></div> 
</div>
</template>

<script>
export default {
	name: 'HomeSwiper',
	data () {
		return {
			swiperOption: {
				loop: true,
				autoplay: 3000,
				pagination: '.swiper-pagination'
			},
			imgList: [
				{
					id: '001',
					imgUrl: 'https://imgs.qunarzz.com/p/tts5/1803/52/f0bdeb873d1a3402.jpg_r_390x260x90_e9ac2738.jpg'
				},
				{
					id: '002',
					imgUrl: 'https://imgs.qunarzz.com/p/tts4/1611/9e/2fbbff27f30cd302.jpg_r_390x260x90_5f6b7794.jpg'
				}
			]
		}
  	}
}
</script>

<style lang="stylus">
	.wrapper
		overflow: hidden
		width: 100%
		height: 0
		padding-bottom: 66.7%
		.swiper-img
			width: 100%
		.swiper-pagination
			position: absoulte
			left: 50%
			margin-top: -30px
			.swiper-pagination-bullet-active
				background: #fff
</style>
